<!--万能表单模块-->
<template>
  <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <sea-table-title title="el-form +" subtitle="对 el-form 二次封装，有效降低代码量，对于常规代码，形成标准的用法。"></sea-table-title>
    <el-form-item label="输入框" prop="input" for="input">
      <el-input size="small" v-model="ruleForm.input" id="input"></el-input>
    </el-form-item>
<!--    <el-form-item label="选择" prop="checkbox">-->
<!--      <sea-select v-model="ruleForm.select" :options="options" placeholder="下拉框" @change="onchange"></sea-select>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="选择" prop="checkbox">-->
<!--      <sea-checkbox v-model="ruleForm.checkbox" placeholder="单选确认框"></sea-checkbox>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="复选" prop="checkboxGroup">-->
<!--      <sea-checkbox-group :options="options" v-model="ruleForm.checkboxGroup" placeholder="单选"></sea-checkbox-group>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="单选" prop="radio">-->
<!--      <sea-radio-group :options="options" v-model="ruleForm.radio"></sea-radio-group>-->
<!--    </el-form-item>-->

<!--    <el-form-item label="日期" prop="date">-->
<!--      <sea-date-picker v-model="ruleForm.date" placeholder="单选"></sea-date-picker>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="日期范围" prop="dateRange">-->
<!--      <sea-date-range v-model="ruleForm.dateRange"></sea-date-range>-->
<!--    </el-form-item>-->

<!--    <el-form-item label="富文本框" prop="editor">-->
<!--      <sea-editor v-model="ruleForm.editor" placeholder="单选"></sea-editor>-->
<!--    </el-form-item>-->

<!--    <el-form-item label="下拉树" prop="tree">-->
<!--      <sea-select-tree v-model="ruleForm.tree" :options="tree1" placeholder="下拉树"></sea-select-tree>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="复选树" prop="checkTree">-->
<!--      <sea-check-tree v-model="ruleForm.checkTree" :options="tree2" placeholder="多选树"></sea-check-tree>-->
<!--    </el-form-item>-->

<!--    <el-form-item label="图片上传" prop="images">-->
<!--      <sea-image-uploader v-model="ruleForm.images" placeholder="多选树"></sea-image-uploader>-->
<!--    </el-form-item>-->

<!--    <el-form-item>-->
<!--      <el-button type="primary" @click="submitForm">立即创建</el-button>-->
<!--      <el-button @click="resetForm">重置</el-button>-->
<!--    </el-form-item>-->
  </el-form>
</template>

<script>

let options = [
    {value: 1, label: '区域1'}
    , {value: 2, label: '区域2'}
];


let tree1 = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '一级 2'}
];

let tree2 = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '一级 2'}
];

export default {
    components: {},
    data() {
        return {
            options: options,
            tree1: tree1,
            tree2: tree2,
            ruleForm: {
                input: 'value',
                checkbox: true,
                select: 1,
                radio: 1,
                checkboxGroup: [1],
                date: '',
                dateRange: undefined,
                editor: '',
                tree: 1,
                checkTree: [1],
                images: ''
            },
            rules: {
                name: [
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                region: [
                    {required: true, message: '请选择活动区域', trigger: 'change'}
                ],
                date1: [
                    {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                ],
                date2: [
                    {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
                ],
                type: [
                    {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
                ],
                resource: [
                    {required: true, message: '请选择活动资源', trigger: 'change'}
                ],
                desc: [
                    {required: true, message: '请填写活动形式', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        submitForm: function () {
            this.$refs.search_from.validate(valid => {
                if (valid) {
                    console.log(this.form_data);
                    // this.$layer.ajax({
                    //     url: 'dev/device/info',
                    //     method: 'POST',
                    //     params: this.form_data
                    // }).then((ret) => {
                    //     if (ret.code === 0) {
                    //         this.onSucceed();
                    //         Layers.succeed("操作成功！");
                    //     }
                    // });
                } else {
                    this.$layers.warn('表单包含无效字段！');
                }
            });
        },
        resetForm: function () {
            this.$refs.ruleForm.resetFields();
        },

        onchange: function (val){
            console.log(val);
        }
    }
}
</script>
